$(function() {
	$.ajax({
		type: 'get',
		url: './js/goodsData.json',
		success: function(data) {
			var goodsData = data.goodsData;
			var str1 = '';
			for (var i = 0; i < goodsData.length; i++) {
				var strGroup = '';
				for (var j = 0; j < goodsData[i].goodsGroup.length; j++) {
					strGroup += `<a href="#">${goodsData[i].goodsGroup[j].goodsmen}</a>`
				}
				var strGroup2 = '';
				for (var j = 0; j < goodsData[i].goodsGroup.length; j++) {
					strGroup2 += `<li>${goodsData[i].goodsGroup[j].goodsmen}</li>`
				}
				var strImg = '';
				for (var j = 0; j < goodsData[i].imgSrc.length; j++) {
					strImg += `<li><img src="${goodsData[i].imgSrc[j]}"width="112" height="49"></li>`
				}
				str1 += `<div class="categorys-item">
							<div class="item-content">
								<i class="icon-right"><img src="img/right.svg" height="15"></i>
								<div class="categorys-title">
									<strong><a href="#">${goodsData[i].name}</a></strong>
									<span class="categorys-title-span">
										${strGroup}
									</span>
								</div>
							</div>
							<div class="categorys-items-layer" style="display: none;">
								<div class="catetop-layer-con clearfix">
									<h3>${goodsData[i].name}</h3>
									<ul class="cate-list">
										${strGroup2}
									</ul>
									<ul class="cate-logo">
										${strImg}
									</ul>
								</div>
							</div>
						</div>`
			}
			$(".bannerLeft").append(str1);
			var bgimgs='';
			for(var i=0;i<data.bgImg.length;i++){
                bgimgs+=`
				<li><img src="${data.bgImg[i]}"width="950" height="450"></li>
				`
			}
			$('.Bgimg').append(bgimgs);

			// 楼层导航
			var showGoods=data.showGoods;
			var str2='';
			for(var i=0;i<showGoods.length;i++){
				var bigImgGroup='';
				for(var j=0;j<showGoods[i].bigImg.length;j++){
					bigImgGroup+=`
						<div class="rt-ad">
							<img src="${showGoods[i].bigImg[j]}"height="170"width="399">
						</div>
					`
				}
				var imgsGroup='';
				for(var j=0;j<showGoods[i].imgs.length;j++){
					imgsGroup+=`
						<li>
							<img src="${showGoods[i].imgs[j]}">
						</li>
					`
				}
				var goodsItem='';
				var goodsStr='';
				for(var j=0;j<showGoods[i].goods.length;j++){
					for(var k=0;k<showGoods[i].goods[j].children.length;k++){
						goodsStr+=`
							<li>
								<div class="p-img">
									<img src="${showGoods[i].goods[j].children[k].img}" >
									<div class="p-name">${showGoods[i].goods[j].children[k].name}</div>
									<div class="p-price">${showGoods[i].goods[j].children[k].price}</div>
								</div>
							</li>
						`
					}
					goodsItem+=`
						<li class="fgoods-hd-list">${showGoods[i].goods[j].groupName}
							<div class="bd-right"style="display: none">
								<div class="right-top clearfix">
									${bigImgGroup}
								</div>
								<div class="right-bottom clearfix">
									<ul class="fgoods-list">
										${goodsStr}
									</ul>
								</div>
							</div>
						</li>
					`
				}
				str2+=`
				<div class="catetop-floor" id="floor_1">
					<div class="f-hd">
						<h2>${showGoods[i].title}</h2>
						<h3>${showGoods[i].floor}</h3>
						<ul class="fgoods-hd">
							${goodsItem}
						</ul>
					</div>
					<div class="f-middle">
						<div class="bd-left">
							<img src="${showGoods[i].imgSrc}"width="400" height="660">
						</div>
					</div>
					<ul class="brands">
						${imgsGroup}
					</ul>
				</div>
				`
			}
			$(".catetop-floor-wp").append(str2);
			// 随手购
			var str3='';
			var shopping=data.shopping;
			for(var i=0;i<shopping.children.length;i++){
				str3+=`
				<li>
					<div class="p-img">
						<img src="${shopping.children[i].imgs}">
					</div>
					<div class="p-price">${shopping.children[i].price}</div>
					<div class="p-name">
					    ${shopping.children[i].words}
					</div>
					<div class="p-btn">${shopping.details}</div>
				</li>
				`
			}
			$(".awg-ul").append(str3);
			$(".categorys-title-span").eq(0).css("width","230px");
            //   跳楼机
			$(window).scroll(function(){
				if ($(this).scrollTop()>=400) {
					$(".catetop-lift").fadeIn(1000)
				} else{
					$(".catetop-lift").fadeOut(1000)
				}
                
				$(".catetop-floor").each(function(i,ele){
					if($(window).scrollTop()>=$(ele).offset().top-400){
						$(".catetop-lift-item").eq(i+1).addClass('on').siblings().removeClass('on')
					}
					if($(window).scrollTop()>=4300){
						$(".catetop-lift-item").eq(6).addClass('on').siblings().removeClass('on')
					}
				})
				$('.lift-item-top').click(function(){
					$('html').animate({
						scrollTop:0
					},1000)
				})
			})
			// 随手购轮播
			$("#atwillgo").mouseover(function(){
				$(".iconbtn").css("display","block")
			}).mouseleave(function(){
				$(".iconbtn").css("display","none")
			})
			
		}
	})

	var activeIndex = 0 ;
	var circle=$('.circle');
	function bannerFadeFn() {
		circle.removeClass("active")  
		circle.eq(activeIndex).addClass("active")
		$(".Bgimg li").fadeOut(200)
		$(".Bgimg li").eq(activeIndex).fadeIn(200)
	}
	$(".circle").mouseover(function () { 
		activeIndex = $(this).index()
		clearInterval(setTimer)
		bannerFadeFn();
		})
	var setTimer=setInterval(() => {
		function next() {
			if (activeIndex < $(".Bgimg li").length - 1) {
				activeIndex++
			} else {
				activeIndex = 0
			}
			bannerFadeFn()
		}
		next()
	}, 3000);
	
    
})
